<template>
    <div>
    <el-dialog
        title="修改商品类型"
        :visible.sync="isDlgShow"
        width="60%"
        v-on:close="closeHandler()"
        center>
        <span>
        <addelmentdlg v-if="isShowAddEdDlg"  v-on:on-close-handler="closeAddEdDlg" 
        v-on:on-click-addelment="onClickAddElmentHandler" 
        title="添加商品规格" :listdata="options"></addelmentdlg>

            <el-row>
                <el-col :span="3">
                    <div>*价格：</div>
                </el-col>
                <el-col :span="21">
                    <el-input-number v-model="selprice" :precision="2" :step="1" :max="100000000"></el-input-number>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*库存：</div>
                </el-col>
                <el-col :span="21">
                    <el-input-number v-model="selstorage" :step="1" :max="100000000"></el-input-number>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*规格:</div>
                </el-col>
                 <el-col :span="21">
                    <el-col>
                        <el-button type="primary"  @click="addElmentHandler()">添加规格</el-button>
                    </el-col>
                    <el-col v-for="categorydata in seloptions" :key="categorydata.key" class="addBar">
                        <el-tag>{{categorydata.label}}</el-tag>
                        <el-button type="danger" size="mini" @click.prevent="removeCategory(categorydata)">删除</el-button>
                    </el-col>
                 </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div>*缩略图：</div>
                </el-col>
                <el-col :span="21">
                   <el-upload list-type="picture-card" class="upload-demo" ref="upload" 
                    action="" 
                    :http-request="onThumbUpload" 
                    :file-list="thumbList"
                    :before-upload="beforeImageUpload" 
                    :auto-upload="true" 
                    :limit="thumbLimit"
                    :on-exceed="onUploadExceed"
                    :on-error="onUploadError"
                    :on-remove="onThumbUploadRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                 </el-col>
            </el-row>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="updateProductProperty()">提交</el-button>
            <el-button @click="closeHandler()">取消</el-button>
        </span>
    </el-dialog>
    </div>
</template>
<script>
import addelmentdlg from "../common/addelmentdlg";
export default {
    props: ["productId", "price", "storage", "thumb", "specIds", "edid"],
    components: { addelmentdlg },
    created() {
        this.thumbList = [{ name: "缩略图", url: this.thumb }];
        this.reflushHandler();
    },
    name: "editorcommodityproperty",
    data() {
        return {
            isDlgShow: true,
            options: [],
            seloptions: [],
            selprice: this.price,
            selstorage: this.storage,
            admin: this.$persistence.get("admin"),
            thumbLimit: 1,
            thumbList: [],
            selId: 0,
            isShowAddEdDlg: false
        };
    },
    methods: {
        addcommodityspec() {
            this.reflushHandler();
        },
        addElmentHandler() {
            this.isShowAddEdDlg = true;
        },
        removeCategory(item) {
            var index = this.seloptions.indexOf(item);
            if (index !== -1) {
                this.seloptions.splice(index, 1);
            }
            this.options.push({
                value: item.id,
                label: item.label
            });
        },
        reflushHandler() {
            this.findProductById();
        },
        getSlidesUrl(fileList) {
            if (fileList.length == 1) {
                return fileList[0].url;
            } else {
                let list = [];
                for (const key in fileList) {
                    if (fileList.hasOwnProperty(key)) {
                        const file = fileList[key];
                        list.push(file.url);
                    }
                }
                return list;
            }
        },
        getSpecIds(opts) {
            let list = [];
            for (const key in opts) {
                if (opts.hasOwnProperty(key)) {
                    const spec = opts[key];
                    list.push(spec.id + "");
                }
            }
            return list.join(",");
        },
        updateProductProperty() {
            if (this.seloptions.length == 0) {
                this.$message({
                    message: "请添加规格",
                    type: "warning"
                });
                return;
            }
            if (this.thumbList.length == 0) {
                this.$message({
                    message: "请添加缩略图",
                    type: "warning"
                });
                return;
            }
            this.$axiosPost(
                "/AdminService/updateProductProperty",
                {
                    session: this.admin.session,
                    productProperty: {
                        price: this.selprice,
                        thumb: this.getSlidesUrl(this.thumbList),
                        storage: this.selstorage,
                        specIds: this.getSpecIds(this.seloptions),
                        id: this.edid
                    }
                },
                response => {
                    this.$message({
                        message: "修改商品类型成功",
                        type: "warning"
                    });
                    this.isDlgShow = false;
                    this.$emit("updateProductProperty");
                },
                error => {
                    this.$message.error("添加失败，请检查网络环境！");
                }
            );
        },
        findProductById() {
            this.$axiosPost(
                "/AdminService/findProductById",
                {
                    session: this.admin.session,
                    id: this.productId
                },
                response => {
                    this.options = this.formatCommodityspecList(response.data.specCategorys);
                    this.initSelOptions();
                }
            );
        },
        initSelOptions() {
            for (const key in this.specIds) {
                if (this.specIds.hasOwnProperty(key)) {
                    const selId = parseInt(this.specIds[key]);
                    let element = this.$findItemByValue(this.options, selId);
                    this.seloptions.push({ label: element.label, id: element.value });
                    var index = this.options.indexOf(element);
                    if (index !== -1) {
                        this.options.splice(index, 1);
                    }
                }
            }
        },
        beforeImageUpload(file) {
            return this.$checkUpload(file);
        },
        onUploadExceed(file, fileList) {
            this.$message.error("上传图片超过" + fileList.length + "张");
        },
        onThumbUpload(data) {
            this.$starUplodeFile(data, this.thumbList);
        },
        onUploadError(err, file, fileList) {
            this.$message.error("上传图片失败!" + err);
        },
        onThumbUploadRemove(file, fileList) {
            this.thumbList = fileList;
        },
        closeHandler() {
            this.isDlgShow = false;
            this.isShowAddEdDlg = false;
            this.$emit("closeAddcommodityproperty");
        },
        closeAddEdDlg() {
            this.isShowAddEdDlg = false;
        },
        onClickAddElmentHandler(value) {
            let selId = parseInt(value[value.length - 1]);
            let element = this.$findItemByValue(this.options, selId);
            this.seloptions.push({ label: element.label, id: element.value });
            var index = this.options.indexOf(element);
            if (index !== -1) {
                this.options.splice(index, 1);
            }
            this.isShowAddEdDlg = false;
        },
        formatCommodityspecList(list) {
            let userlist = [];
            for (let index = 0; index < list.length; index++) {
                const element = list[index].specs;
                for (const key in element) {
                    if (element.hasOwnProperty(key)) {
                        const specs = element[key];
                        userlist.push({
                            value: specs.id,
                            label: specs.name
                        });
                    }
                }
            }
            return userlist;
        }
    }
};
</script>

<style scoped>
.addBar {
    margin-bottom: 5px;
    margin-top: 5px;
}
.el-row {
    margin-bottom: 20px;
}
.el-col {
    border-radius: 4px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.bg-purple {
    background: #d3dce6;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>